<template>
	<view class="fenlei">
		<u-navbar :is-back="false" :border-bottom="false" >
			<view class="slot-wrap">
				<image src="../../static/tab_logo@2x.png" mode=""></image>
			</view>
		</u-navbar>
		<view class="list" >
			<view class="list-top" @click="fullScreen1(data)" v-if="data">
				<image class="list-top-image" :src="data.coverUrl" mode="aspectFill"></image>
				<image class="list-top-image1" src="../../static/sp_bf@2x.png" mode=""></image>
			</view>
			<view class="list-tese" v-if="list.length != 0">
				<view class="list-tese-title">特色</view>
				<view class="list-tese-title1">characteristic</view>
			</view>
			<view class="list-content">
				<view class="list-content-item" v-for="(item,index) in list" :key="index" @click="fullScreen(item)">
					<image class="list-content-item-image" :src="item.coverUrl" mode="aspectFill"></image>
					<image class="list-content-item-image1" src="../../static/sp_bf@2x.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="loadmore" v-if="isLoadmore">
			<u-loadmore :status="status" :icon-type="flower"/>
		</view>
		
		<view class="preview-full" v-if="isOpenVideo">
			<video id="myVideo" class="video" :src="videoUrl" :autoplay="true" @fullscreenchange="fullscreenchange"></video>
		</view>
		<view class="empty" v-if="showEmpty">
			<image src="../../static/kzt_logo@2x.png" mode=""></image>
			<text>暂无特色视频</text>
		</view>
		<u-tabbar :list="tabbar" :mid-button="false" icon-size='45' active-color="#BD0632" inactive-color="#333333" :before-switch="beforeSwitch"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				size:10,
				pageTotal:'',
				list:[],
				tabbar:[{
						iconPath: "/static/tab_sy_1.png",
						selectedIconPath: "/static/tab_sy_1.png",
						text: '首页',
						pagePath: "/pages/index/index"
					},{
						iconPath: "/static/tab_fl_1.png",
						selectedIconPath: "/static/tab_fl_1.png",
						text: '分类',
						pagePath: "/pages/fenlei/fenlei"
					},{
						iconPath: "/static/tab_wxg.png",
						selectedIconPath: "/static/tab_wxg.png",
						text: '五行宫',
						pagePath: "/pages/pinpai/pinpai"
					},
					{
						iconPath: "/static/tab_gwd_1.png",
						selectedIconPath: "/static/tab_gwd_1.png",
						text: '购物袋',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: "/pages/gouwudai/gouwudai"
					},
					{
						iconPath: "/static/tab_wd_1.png",
						selectedIconPath: "/static/tab_wd_1.png",
						text: '我的',
						pagePath: "/pages/wode/wode"
					},
				],
				isflag:true,
				show:false,
				videoUrl:'',
				isOpenVideo: false,
				videoContext: null,
				data:'',
				showEmpty:false,
				status: 'loading',
				isLoadmore:true,
				share:uni.getStorageSync('share')
			}
		},
		onLoad() {
			this.getRecommendVideo()
			this.getVideoList()
			this.context = uni.createVideoContext("video",this)
		},
		onShow() {
			this.getCartCount()
		},
		methods: {
			//购物袋数量
			async getCartCount(){
				const res = await this.$u.api.getCartCount()
				console.log(res,'购物车数量')
				this.tabbar[3].count = res.data
			},
			//推荐视频
			async getRecommendVideo(){
				const res = await this.$u.api.getRecommendVideo()
				if (res.data) {
					this.data = res.data
				}
				
			},
			//特色视频
			async getVideoList(){
				const params = {
					page:this.page,
					size:this.size,
				}
				const res = await this.$u.api.getVideoList(params)
				if (res.total < 10) {
					this.isLoadmore = false
				}
				this.status = 'nomore'
				this.list = [...this.list,...res.rows]
				this.pageTotal = Math.ceil(res.total/this.size)
				if (res.total > 0) {
					this.showEmpty = false
				}else{
					this.showEmpty = true
				}
				uni.stopPullDownRefresh()
			},
			//切换之前回调
			async beforeSwitch(index){
				if (index == 4 || index == 3) {
					const res = await this.$u.api.getUserInfo()
					return true
				}
			},
			fullScreen1(data){
				this.videoUrl = data.videoUrl
				this.isOpenVideo = true
				this.videoContext = uni.createVideoContext('myVideo', this)
				this.videoContext.play()
				this.videoContext.requestFullScreen({direction:90})
			},
			//播放视频
			fullScreen(data){
				this.videoUrl = data.videoUrl
				this.isOpenVideo = true
				this.videoContext = uni.createVideoContext('myVideo', this)
				this.videoContext.play()
				this.videoContext.requestFullScreen({direction:0})
			},
			//退出全屏时停止播放
			fullscreenchange(e) {
				console.log(e)
				if (!e.detail.fullScreen) {
					this.videoContext.stop()
					this.isOpenVideo = false
				}
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.page = 1
			this.list = []
			this.getVideoList()
			this.getRecommendVideo()
		},
		//向上加载
		onReachBottom() {
			this.page = this.page + 1
			if (this.page <= this.pageTotal) {
				this.isLoadmore = true
				this.status = 'loading';
				setTimeout(()=>{
					this.getVideoList()
				},600)
				
			} else{
				//this.$u.toast('没有更多数据了')
			}
		},
	}
</script>
<style>
	.u-badge--bg--error.data-v-2b1712d8{
		background: #A93156 !important;
	}
</style>
<style scoped lang="scss">
    .slot-wrap {
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	/* 如果您想让slot内容占满整个导航栏的宽度 */
    	// flex: 1;
    	/* 如果您想让slot内容与导航栏左右有空隙 */
    	padding-left: 316rpx;
    }
    .slot-wrap image{
    	width: 114rpx;
    	height: 36rpx;
    }
	.list{
		padding: 28rpx 28rpx 28rpx 28rpx;
	}
	.list-top{
		width: 694rpx;
		height: 352rpx;
		position: relative;
	}
	.list-top-image{
		width: 694rpx;
		height: 352rpx;
	}
	.list-top-image1{
		position: absolute;
		top: 124rpx;
		left: 294rpx;
		width: 104rpx;
		height: 104rpx;
	}
	.list-tese{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0rpx;
	}
	.list-tese-title{
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
	}
	.list-tese-title1{
		padding-top: 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 28rpx;
	}
	.list-content{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.list-content-item{
		width: 334rpx;
		height: 486rpx;
		margin-bottom: 28rpx;
		position: relative;
	}
	.list-content-item-image{
		width: 334rpx;
		height: 486rpx;
	}
	.list-content-item-image1{
		position: absolute;
		top: 198rpx;
		left: 122rpx;
		width: 104rpx;
		height: 104rpx;
	}
	.preview-full {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
	}
	.preview-full video {
		width: 100%;
		height: 100%;
		z-index: 1002;
	}
	.empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 350rpx;
	}
	.empty image{
		width: 238rpx;
		height: 76rpx;
	}
	.empty text{
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
	}
	.loadmore{
		padding-bottom: 20rpx;
	}
</style>
